<template>
  <div class="warpp">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item in swiper" :key="item.id"><img :src="item.imgUrl" alt=""></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>

    export default {
        name: "HomeSwiper",
      props:{
        swiper:Array
      },
      data(){
          return{
            swiperOption:{
              pagination:".swiper-pagination",
              loop:true,
              autoplay:2000
            },
            // imgurl:[
            //   {
            //     id:'001',
            //     url:"https://img1.qunarzz.com/qs/1906/29/b4ba73e0b6e2ea02.jpg"
            //   },
            //   {
            //     id:'002',
            //     url:"https://img1.qunarzz.com/qs/1906/5f/06ad5bccfa113802.jpg"
            //   },
            //   {
            //     id:'003',
            //     url:"https://img1.qunarzz.com/qs/1905/92/d0a7f0687efa3f02.jpg"
            //   },
            //   {
            //     id:'004',
            //     url:"https://img1.qunarzz.com/qs/1906/51/a4d8f83f48b4f02.jpg"
            //   },
            // ]
          }
      }
    }
</script>

<style scoped lang="stylus">
  .warpp >>>.swiper-pagination-bullet-active{
    background #fff;
  }
.warpp .swiper-slide img{
  width 100%;
}



</style>
